<template>
  <div class="item-detail flex column">
    <div class="item-title">分类组件</div>
    <div class="item-content">
      <Form :model="detailData" :label-width="80">
        
        <FormItem label="">
          <div class="flex center">
            <Button type="primary" ghost @click="add">添加新的分类</Button>
          </div>
        </FormItem>
      </Form>
    </div>
    <div class="banner-content-edit scroll">
      <draggable v-model="detailData.json" :options="dragOption">
        <transition-group>
          <div class="banner-content-item flex center" v-for="(item,index) in detailData.json" :key="'rankedit'+index">
            <div class="banner-form-wrapper">
              <Form :model="item" :label-width="70">
              	
                <FormItem label="分类名称">
                  <Input style="width: 200px;"  @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false"  v-model="item.title" placeholder="请输入分类名称"></Input>
                </FormItem>
        				<FormItem label="跳转类型">
          					<div class="flex center">
          						<Select v-model="item.skip_type" class="select-wrapper" @on-change="chageSel(item)">
          							<Option value="goods">商品</Option>
          							<Option value="label">微页面</Option>
          						</Select>
          						<div class="input-wrapper">
          							<Input style="width: 200px;" v-model="item.skip_url" @click.native="tapInput(index,item)" placeholder="请输入商品ID或微页面ID"></Input>
          						</div>
          					</div>
                    <div class="hide">路径：{{getSkipUrl(item.skip_type,item,item.skip_url)}}</div>

                	</FormItem>
                        
              </Form>
            </div>
            <div class="icon-wrapper" @click="delBanner(index)">
              <Icon type="ios-trash-outline" />
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>

    <!-- 商品选择器 -->
    <goodsSelect buyMode="-9" @confirm="commitGoodsFn" :selectNum="1" ref="goodsModal" :goodsIdStr="goodsIdStr" ></goodsSelect>
    <!-- 微页面选择器 -->
     <micropage-select ref="micropageModal" @confirm="chosePages"></micropage-select>
   
  </div>
</template>
<script>

import { uploadImage } from 'api/uploadImage'

// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'
// 微页面选择器组件
import MicropageSelect from 'base/micropage-select/micropage-select'

import draggable from 'vuedraggable'

export default {
  name: 'ClassDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  data() {
    return {
      // item索引
      selectIndex: 0,
      dragOption: {
          animate: 150,
          disabled: false
      },
	  }
  },

  computed: {
    goodsIdStr: function () {
      if (this.detailData.json.length>0) {
        if (this.selectIndex > (this.detailData.json.length-1)) {
          this.selectIndex = 0;
        }
        return this.detailData.json[this.selectIndex].skip_url;
      } else {
        return "";
      }
    }
  },

  methods: {
     // 设置path 兼容旧写法
    getSkipUrl:function(_type,_item,_id){
        if(_type == 'goods'){
            _item.path = _id ? ('app/mall/item/item?goodsId='+_id) : "";
            _item.jump_url = _item.path;
            return _item.path;
        }else if(_type == 'label'){
            _item.path = _id ? ('app/mall/label/label?labelId='+_id) : "";
            _item.jump_url = _item.path;
            return _item.path;
        }
    },

    tapInput(index,item) {
      this.selectIndex = index;
      if (item.skip_type == "goods") {
        this.openGoodsSelectFn();
      } else {
        // 打开微页面选择器
        this.$refs.micropageModal.show();
      }
    },

    // 打开商品选择器
    openGoodsSelectFn(){
        this.$refs.goodsModal.show()
    },

    // 选中商品回调
    commitGoodsFn(_id){
        this.detailData.json[this.selectIndex].skip_url = _id;
    },

      // 选中微页面回调
    chosePages(ids) {
        this.detailData.json[this.selectIndex].skip_url = ids[0];
    },

    // 处理图片
    handleFileChange (event) {
      var that = this;
      uploadImage(event.target.files[0]).then(imgUrl => {
          that.detailData.json[event.target.name].image_url = imgUrl;
      }).catch(err => {
          that.$Message.error(err);  
      })  
    },

    // 添加
    add(){
      var _i=this.detailData.json.length;
      var _class={
    		title: "分类",  
    		skip_type : "label",
    		skip_url: "",
      }
      if(typeof this.detailData.json != 'object') this.detailData.json=[];
      this.detailData.json.push(_class);
      this.$Message.success("添加成功，请编辑详细内容")
    },

    // 删除轮播
    delBanner(index) {
      this.detailData.json.splice(index,1);
    },

    /*
    * 选择器
    */
    chageSel(_item){
      _item.skip_url='';
    },
    
  },
  components: {
  	draggable,goodsSelect,MicropageSelect
  }
}

</script>

<style scoped>

@import url("../baseModule.less");

/*轮播编辑开始*/
.banner-content-edit {
	flex: 1;
	padding: 16px 16px 16px 24px;
	padding-top: 0;
}
.banner-img-wrapper {
	width: 180px;
	min-width: 180px;
    height: 120px;
    padding: 5px;
    border: 1px solid #f2f2f2;
}
.banner-content-item {
	padding: 16px 0;
    border-top: 1px solid #f2f2f2;

}
.banner-form-wrapper {
    margin: 0 16px 0 12px;
    flex: 1;
}

/*上传图片控件*/
.input-file-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	justify-content: center;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}

</style>
